<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>天气预报</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="container">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            说明
        </h3>
    </div>
    <div class="panel-body">
        这是一个通过Thymeleaf生成的页面,实现了MVC模式,后端的Controller是:WeatherReportController.<br/>
        <ul>
            <li><a href="/webapp.html">查看基于Vue的静态页面</a></li>
            <li><a href="/swagger-ui.html" target="_blank">查看全部REST API</a></li>
        </ul>
    </div>
</div>
<div class="form-group">
    <label>城市列表</label>
    <select class="form-control" id="selectCity">
        <option th:each="city: ${report.cityList}"
                th:value="${city.key}"
                th:text="${city.value}"
                th:selected="${city.key eq report.cityCode}"></option>
    </select>
</div>
<ul class="list-group">
    <li class="list-group-item" th:text="'城市: ' + ${report.weather.city}"></li>
    <li class="list-group-item" th:text="'空气: ' + (${report.weather.aqi}==null ? '-':${report.weather.aqi})"></li>
    <li class="list-group-item" th:text="'温度: ' + ${report.weather.wendu}"></li>
    <li class="list-group-item" th:text="'备注: ' + ${report.weather.ganmao}"></li>
</ul>
<table class="table">
    <caption>天气</caption>
    <thead>
    <tr>
        <th>日期</th>
        <th>天气</th>
        <th>最高温度</th>
        <th>最低温度</th>
        <th>风向</th>
        <th>风力</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td th:text="${report.weather.yesterday.date}"></td>
        <td th:text="${report.weather.yesterday.type}"></td>
        <td th:text="${report.weather.yesterday.high}"></td>
        <td th:text="${report.weather.yesterday.low}"></td>
        <td th:text="${report.weather.yesterday.fx}"></td>
        <td th:text="${report.weather.yesterday.fl}"></td>
    </tr>
    <tr th:each="fore: ${report.weather.forecast}">
        <td th:text="${fore.date}"></td>
        <td th:text="${fore.type}"></td>
        <td th:text="${fore.high}"></td>
        <td th:text="${fore.low}"></td>
        <td th:text="${fore.fengxiang}"></td>
        <td th:text="${fore.fengli}"></td>
    </tr>
    </tbody>
</table>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#selectCity").change(function (e) {
            window.location.href = "/weather/" + $("#selectCity").val();
        });
    });
</script>
</body>
</html>